<template>
    <div class="edit_phone">
        <page-header-com>
            <template #default>手机号修改</template>
            <template #right><button class="save" @click="updatedPhone">保存</button></template>
        </page-header-com>
        <div class="info_item phone">
            <span>原手机号</span><input v-model="phone" type="text" placeholder="请输入手机号"><button @click="sendCode">发送验证码</button>
        </div>
        <div class="info_item">
            <span>验证号</span><input v-model="testCode" type="text" placeholder="请输入4位验证码">
        </div>
        <div class="info_item">
            <span>新手机号</span><input v-model="newPhoneNum" type="text" placeholder="">
        </div>

        <!-- 提示框 -->
        <nut-dialog teleport="#app" title="提示" :content="content" v-model:visible="visible">
            <template #footer>
                <nut-button @click="visible = false" size="small" color="#C1AB96" plain>确定</nut-button>
            </template>
        </nut-dialog>
    </div>
</template>

<script>
import { getMessageCode, updateUserInfo } from '../api/user'
export default {
    name: 'editPhoneNumView',
    data() {
        return {
            visible: false,
            phone: '',
            // 请求来的验证码
            code: '',
            // 用户输入的验证码
            testCode: '',
            newPhoneNum: '',
            // 弹出框文本
            content: '',
        }
    },
    methods: {
        async sendCode() {
            // 正则判断手机号格式
            if (
                !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g.test(
                    this.phone
                )
            ) {
                this.content = '请输入正确的手机号'
                this.visible = true
                return
            }
            // 获取验证码
            const { data } = await getMessageCode(this.phone)
            this.code = data.result.code
        },
        // 更新手机号
        async updatedPhone() {
            // 正则判断手机号格式
            if (
                !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g.test(
                    this.newPhoneNum
                )
            ) {
                this.content = '请输入正确的手机号'
                this.visible = true
                return
            }
            if (!(this.code == this.testCode)) {
                this.content = '验证码错误'
                this.visible = true
                return
            }
            const { data } = await updateUserInfo(this.userInfo.id, {
                password: this.userInfo.password,
                name: this.userInfo.name,
                header_img: this.userInfo.header_img,
                phone: this.newPhoneNum,
            })
            console.log(data.result)
        },
    },
    computed: {
        // 用户信息对象
        userInfo() {
            return this.$store.state.userInfo
        },
    },
    mounted() {
        // 请求用户信息
        this.$store.dispatch('getUserInfo')
    },
}
</script>

<style scoped lang="scss">
.edit_phone {
    height: 100vh;
    background-color: #fff;
}
button {
    border: 0;
    color: #c1ab96;
    background-color: transparent;
    font-size: 12px;
}
.save {
    padding-bottom: 0;

    margin-left: 12px;
}
.info_item {
    display: flex;
    align-items: center;
    font-size: 3.733vw;
    height: 13.333vw;
    margin: 0 16px;
    border-bottom: 0.267vw solid rgb(232, 231, 231);
    span {
        width: 18.133vw;
    }
    input {
        font-size: 3.2vw;
        flex: 1;
        border: 0;
        outline: none;
    }
}
</style>